<template>
  <div>
      <div id="postcomment">
        <h3>提交评论</h3>
        <p class="p"></p>
        <textarea placeholder="请输入评论内容" v-model="conent"></textarea>
        <mt-button type="primary" size="large" @click="postcomment">发表</mt-button> 
        <p class="p"></p> 
      </div>
     <div id="getcomment">
        <h3>评论列表</h3>
        <p class="p"></p>
            <div v-for="(item,index) in list" :key="index">
              <div class="title">
                <span>第{{index+1}}楼</span>
                <span>用户名:{{item.user_name}}</span>
                <span>评论时间:{{item.add_time | datafmt("YYYY-MM-DD HH:mm:ss")}}</span>
              </div>
              <ul class="mui-table-view" >
                <li class="mui-table-view-cell" v-text="item.content"></li>
              </ul>
            </div>
            <mt-button type="primary" size="large" @click="getpage">加载更多...</mt-button> 
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      conent:"",
      pageindex:1,
      list:[]
    };
  },
  props:['id'],
  created(){
    this.getcomment(this.pageindex)
  },
  methods:{
      getpage(){
        this.pageindex++;
        this.getcomment(this.pageindex);
      },
      getcomment(pageindex){
        pageindex = this.pageindex || 1;
        var url = this.$commons.apidomain + "/api/getcomments/" + this.id+"?pageindex="+pageindex;
        this.$http.get(url).then(function(res){
          var data = res.body;
          if(data.status != 0){
            this.$commons.Toast(data.message);
            return
          }
          this.list = data.message
        })

      },
      postcomment(){
          var url = this.$commons.apidomain + "/api/postcomment/13"
          this.$http.post(url,{conent:this.conent},{emulateJSON:true}).then(function(res){
            var data = res.body;
            if(data.status == 0){
              this.$commons.Toast("提交成功")
            }
            this.conent = "" 
          })
      }
  }
}
</script>
<style scoped>
  #postcomment,#getcomment{
    padding: 5px;
  }
  #postcomment h3,#getcomment h3{
    font-size: 1.4em;
    font-weight: 500;
  }
   .p{
    height: 1px;
    border-bottom: 1px solid #ccc;
    margin: 20px 0 0 0;
  }
  .title{
    background-color: rgba(197,190,190,0.1);
    line-height: 40px;
    padding-left: 10px
  }
  .title span{
    margin-left: 20px
  }
</style>